<template>
  <section class="m_wrapper mt53">
    <div class="banner_box">
      <img
        src="../../../../assets/images/activity/m_aps_msq_banner.png"
        width="100%"
        height="100%"
      />
    </div>
    <div class="title_con">
      <h1 class="title_txt">APS免费公开课！一周助你突破审核</h1>
      <p class="title_score">主办方：留德DIY社区</p>
      <p class="title_score_b">
        <i class="site">西安</i> | <i class="date">2019年9月1日</i>
        <i class="tiem">11:00</i>
      </p>
      <span class="free_txt">免费</span>
    </div>
    <div class="mb70 con_img_box">
      <img
        src="../../../../assets/images/activity/m_aps_msq_detail.jpg"
        width="100%"
      />
    </div>
    <div class="bottom_fixed clearfix">
      <van-cell is-link @click="showPopup">
        <a class="bottom_btn bottom_btn_click">免费报名</a>
      </van-cell>
      <van-popup
        v-model="show"
        closeable
        position="bottom"
        :style="{ height: '30%' }"
      >
        <div class="show_box">
          <div class="input_box">
            <label>姓名：</label><input type="text" />
          </div>
          <div class="input_box">
            <label>电话：</label><input type="text" />
          </div>
          <div class="show_btn clearfix">
            <a class="bottom_btn click_dian">立即报名</a>
          </div>
        </div>
      </van-popup>
    </div>

    <div class="black_box none"></div>
    <div class="click_dian_box" v-if="pupop">
      <svg class="dian_box_close" aria-hidden="true" @click="close">
        <use xlink:href="#icon-guanbi"></use>
      </svg>
      <div class="clear"></div>
      <div class="dian_box_con">
        <img
          src="../../../../assets/images/activity/aps_msq_code.png"
          width="100%"
        />
        <h1>
          扫描二维码关注社区服务号，邀请一名好友助力即可免费参与全部公开课
        </h1>
      </div>
    </div>
  </section>
</template>
<script>
import "../../../../static/css/m_nav_public.css";
import "../../../../static/css/m_activity_index.css";
import "../../../../static/js/public_icon_new";
export default {
  data() {
    return {
      pupop: true,
      show: false,
    };
  },
  computed: {},
  watch: {},
  methods: {
    close() {
      this.pupop = false;
    },
    showPopup() {
      this.show = true;
    },
  },
  created() {},
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  components: {},
};
</script>

<style scoped>
body {
  background-color: #f7f7f7;
}
.mt53 >>> .bottom_fixed {
  padding: 0.05rem 0 0.05rem 0;
}

.mt53 >>> .van-cell__value--alone {
  text-align: center;
}
.mt53 >>> .van-icon-arrow::before {
  content: "";
}
</style>
